<template>
  <div class="right-panel">
    <el-drawer
      :model-value="modelValue"
      :direction="direction"
      :show-close="true"
      :with-header="true"
      :title="title"
      @close="handleClose"
    >
      <slot />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { DrawerProps } from "element-plus"
defineProps({
  modelValue: {
    type: Boolean,
    default: true
  },
  direction: {
    type: String as PropType<DrawerProps["direction"]>,
    validator(val: string) {
      return ["rtl", "ltr", "ttb", "btt"].includes(val)
    },
    default: "rtl"
  },
  title: {
    type: String,
    default: "自定义title"
  }
})
const emit = defineEmits(["update:modelValue", "close"])
const handleClose = () => {
  emit("update:modelValue", false)
  emit("close")
}
</script>
